<template>
  <div class="layout">
    <Topnav toggleMenuButtonVisible class="nav" />
    <div class="content">
      <aside v-if="menuVisible">
        <router-link to="/"><h2>首页</h2></router-link>
        <h2>文档</h2>
        <ol>
          <li><router-link to="/doc/intro">介绍</router-link></li>
          <li><router-link to="/doc/install">安装</router-link></li>
          <li><router-link to="/doc/get-started">开始使用</router-link></li>
        </ol>
        <h2>组件列表</h2>
        <ol>
          <li><router-link to="/doc/switch">Switch    开关</router-link></li>
          <li><router-link to="/doc/button">Button    按钮</router-link></li>
          <li><router-link to="/doc/dialog">Dialog    对话框</router-link></li>
          <li><router-link to="/doc/tabs">Tabs        标签页</router-link></li>
          <li><router-link to="/doc/tooltip">Tooltip  文字提示</router-link></li>
          <li><router-link to="/doc/divider">Divider  分割线</router-link></li>
          <li><router-link to="/doc/table">Table    表格</router-link></li>
          <li><router-link to="/doc/alert">Alert    警告提示</router-link></li>
          <li><router-link to="/doc">更新中。。。</router-link></li>
        </ol>
      </aside>
      <main>
        <router-view />
      </main>
    </div>
  </div>
</template>
<script lang="ts">
import TopNav from "../components/TopNav.vue";
import { inject, Ref } from "vue";
export default {
  components: {
    TopNav,
  },
  setup() {
    const menuVisible = inject<Ref<boolean>>("menuVisible"); // get
    const gofirst = ()=>{
      alert("回到首页");
    }
    return {
      menuVisible,
      gofirst
    };
  },
};
</script>

<style lang="scss" scoped>
$aside-index: 10; .layout { display: flex; flex-direction: column; height: 100vh; > .nav { flex-shrink: 0; } > .content { flex-grow: 1; padding-top: 60px; padding-left: 156px; @media (max-width: 500px) { padding-left: 0; } } } .content { display: flex; > aside { flex-shrink: 0; } > main { flex-grow: 1; padding: 16px; background: white; } } aside { background: lightblue; width: 150px; padding: 16px 0; position: fixed; top: 0; left: 0; padding-top: 70px; height: 100%; z-index: $aside-index; > h2 { margin-bottom: 4px; padding: 0 16px; } > ol { > li { > a { display: block; padding: 4px 16px; text-decoration: none; } .router-link-active { background: white; } } } } main { overflow: auto; }
</style>
